<style>.sDiv {
    float: right;
    position: relative;
    overflow: hidden;
}
.sDiv2 {
    margin-right: 10px;
    font-size: 0;
    display: inline-block;
    vertical-align: middle;
    border: solid 1px #D7D7D7;
    border-radius: 5px;
}
.sDiv2 .qsbox {
    background-color: #FFF;
    font-size: 12px;
    line-height: 24px;
    width: 140px;
    height: 24px;
    padding: 1px 5px;
    border: none;
    /*font-size: 12px;*/
    vertical-align: top;
    letter-spacing: normal;
    display: inline-block;
    border-radius: 0;
}
.sDiv2 .abtn {
    border: none;
    border-radius: 0;
    font-size: 12px;
    vertical-align: top;
    letter-spacing: normal;
    display: inline-block;
}
.sDiv2 .abtn {
    height: 26px;
    cursor: pointer;
    border-left: solid 1px #D7D7D7;
}
</style>
<include file="common:__head__"/>
<style type="text/css">
    .true_amt {margin:20px 0 15px 0;font-size:16px;}
    .analysis_div {height:400px;border:1px solid #61A0A8;float:left;width:47%;}
</style>
<body style="background-color: rgb(255, 255, 255); overflow: auto; cursor: default; -moz-user-select: inherit;">
<div id="append_parent"></div>
<div id="ajaxwaitid"></div>
<div class="page">
    <div class="permissions-tabs">
        <a class="role tabs-bg" href="{:U('Report/order')}">订单统计</a>
    </div>
    <div class="flexigrid">
        <div class="mDiv">
            <form action="{:U('Report/order')}" class="navbar-form form-inline" method="post">
                <div class="sDiv">
                    <div class="sDiv2" style="margin-right: 10px;">
                        <input type="text" size="30" id="st" name="st" value="{$start_time}" placeholder="起始时间" class="qsbox" >
                        <input type="button" class="abtn" value="起始时间">
                    </div>
                    <div class="sDiv2" style="margin-right: 10px;">
                        <input type="text" size="30" id="et" name="et" value="{$end_time}" placeholder="截止时间" class="qsbox" >
                        <input type="button" class="abtn" value="截止时间">
                    </div>
                    <div class="sDiv2">
                        <input class="btn btn-blue" value="搜索" type="submit" id="complete">
                    </div>
                </div>
            </form>
        </div>

        <div class="hDiv">
            <div class="hDivBox">
                <p class="true_amt red_common">已完成订单总金额：￥{$complete_amt}元</p>
                <div id="report_order" class="analysis_div"></div>
                <div id="report_order_amt" class="analysis_div"></div>
            </div>
        </div>
    </div>
</div>
<include file="common:__foot__"/>

<script type="text/javascript" src="__PUBLIC__/plugins/layer/laydate/laydate.js"></script>
    <script type="text/javascript" src="__PUBLIC__/seller/js/echarts.min.js"></script>
    <script type="text/javascript">
        $("#complete").click(function () {
            var start_time = $('#st').val();
            var end_time = $('#et').val();

            if(!start_time || !end_time){
                layer.msg("时间不能为空");return false;
            }

            var start_timestamp = Date.parse(new Date(start_time));
            start_timestamp = start_timestamp / 1000;

            var end_timestamp = Date.parse(new Date(end_time));
            end_timestamp = end_timestamp/1000;

            if(start_timestamp > end_timestamp){
                layer.msg("开始时间必须大于结束时间");return false;
            }
        });

        $('#st').layDate();
        $('#et').layDate();

        var myChartNum = echarts.init(document.getElementById('report_order'));
        // 指定图表的配置项和数据
        var optionNum = {
            title : {
                text: '单量统计',
                subtext: '',
                x:'left'
            },
            tooltip : {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} "
            },
            legend: {
                orient: 'vertical',
                left: 'right',
                data: ['已完成','进行中','已取消']
            },
            series : [
                {
                    name: '访问来源',
                    type: 'pie',
                    radius : '50%',
                    center: ['50%', '60%'],
                    data:[
                        {value:"{$compete_num}", name:'已完成'},
                        {value:"{$count}", name:'进行中'},
                        {value:"{$cancel_num}", name:'已取消'}
                    ],
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChartNum.setOption(optionNum);

        var myChartAmt = echarts.init(document.getElementById('report_order_amt'));
        // 指定图表的配置项和数据
        var optionAmt = {
            title : {
                text: '金额统计',
                subtext: '',
                x:'left'
            },
            tooltip : {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c}"
            },
            legend: {
                orient: 'vertical',
                left: 'right',
                data: ['已完成','进行中','已取消']
            },
            series : [
                {
                    name: '访问来源',
                    type: 'pie',
                    radius : '50%',
                    center: ['50%', '60%'],
                    data:[
                        {value:"{$complete_amt}", name:'已完成'},
                        {value:"{$amt}", name:'进行中'},
                        {value:"{$cancel_amt}", name:'已取消'}
                    ],
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChartAmt.setOption(optionAmt);
    </script>
</body>
</html>